<template>
  <div class="app-container">

    <el-form ref="company" :rules="rules" :model="company" status-icon label-position="left" label-width="100px" style="width: 800px; margin-left:50px;">
      <el-form-item label="企业名" prop="name">
        <el-input v-model="company.name" />
      </el-form-item>
      <el-form-item label="企业描述" prop="description">
        <editor v-model="company.description" :init="editorInit" />
      </el-form-item>
      <el-form-item label="联系人" prop="manager">
        <el-input v-model="company.manager" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contact">
        <el-input v-model="company.contact" />
      </el-form-item>
      <el-form-item label="折扣百分比" prop="discount">
        <el-input v-model="company.discount" type="number" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>

  </div>
</template>

<script>
import { createCompany } from '@/api/company'
import Editor from '@tinymce/tinymce-vue'
import { getToken } from '@/utils/auth'

export default {
  name: 'CompanyEdit',
  components: { Editor },
  data() {
    return {
      id: 0,
      company: {
        discount: 100
      },
      rules: {
        name: [
          { required: true, message: '专题标题不能为空', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '折扣不能为空', trigger: 'blur' }
        ]
      },
      editorInit: {
        language: 'zh_CN',
        convert_urls: false,
        height: 500,
        plugins: [
          'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        ],
        toolbar: [
          'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
          'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
        ]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
  },
  methods: {

    handleCreate() {

    },
    handleCancel() {
      this.$router.push({ path: '/company/list' })
    },
    handleConfirm() {
      this.$refs['company'].validate(valid => {
        if (valid) {
          createCompany(this.company).then(response => {
            this.$router.push({ path: '/company/list' })
          })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.errmsg
              })
            })
        }
      })
    }
  }
}
</script>
